<template>
	<view class="cu-form-group">
        <!-- <view class="title">消息提示</view>
		<uni-popup id="popupMessage" ref="popupMessage" type="message" @change="change">
			<uni-popup-message :type="msgType" :message="message" :duration="2000"></uni-popup-message>
		</uni-popup> -->
		<view class="title">弹框提示</view>
		<!-- 对话框 -->
		<uni-popup id="popupDialog" ref="popupDialog" type="dialog" @change="change">
            <uni-popup-dialog :type="msgType" title="通知" content="欢迎使用 uni-popup!" :before-close="true" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	// import {uniPopup, uniPopupMessage} from '@dcloudio/uni-ui'
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue' //也可使用此方式引入组件
	// import uniPopupMessage from '@dcloudio/uni-ui/lib/uni-popup-message/uni-popup-message.vue' //也可使用此方式引入组件
	import uniPopupDialog from '@dcloudio/uni-ui/lib/uni-popup-dialog/uni-popup-dialog.vue' //也可使用此方式引入组件
	export default {
		name: "FromPopup",
		components: {
			uniPopup,
			// uniPopupMessage,
			uniPopupDialog
		},
		data() {
			return {
				type: 'top',
				msgType: 'success',
				message: '这是一条成功消息提示',
				value: '默认输入的内容'
			}
		},
		methods: {
			/**
			 * popup 状态发生变化触发
			 * @param {Object} e
			 */
			change(e) {
				console.log('popup ' + e.type + ' 状态', e.show)
			},
			/**
			 * 对话框点击确认按钮
             */
            dialogConfirm(done) {
            	this.$refs.popupMessage.open()
            	console.log('点击确认');
            	// 需要执行 done 才能关闭对话框
            	done()
            },			 
			/**
			 * 对话框取消按钮
			 */
			dialogClose(done) {
				this.msgType = 'info'
				this.message = '点击了对话框的取消按钮'
				this.$refs.popupMessage.open()
				// 需要执行 done 才能关闭对话框
				done()
			},
		}
	}
</script>

<style>
  .cu-form-group{
        zoom: .19;
    }

</style>
